import React ,{ Component } from 'react'
import { Link } from 'react-router-dom'
import MUtil from 'util/mm.jsx'
const _mm = new MUtil()
import User from 'service/user-service.jsx'
const _user = new User();
import PageTitle from 'component/page-title/index.jsx'
import Pagination from 'component/pagination/index.jsx'
class UserList extends Component{
  constructor(props){
    super(props)
    this.state = {
      pageNum:1,
      total:100,
      list:[],
      firstLoading:true
    }

  }
  componentDidMount(){
    this.loadUserList()
  }
  loadUserList(){
    _user.getUserList(this.state.pageNum).then(
      (res)=>{
        console.log(res)
        this.setState({
          list:res.list
        },()=>{
          this.setState({
            firstLoading:false
          })
        })
      },
      (errMsg)=>{
        this.setState({
          listL:[]
        })
        _mm.errorTips(errMsg)
      }
    )
  }
  onPageNumChange(pageNum){
    this.setState({
      pageNum:pageNum
    },()=>{
      this.loadUserList()
    })

  }
  render(){
    let listBody = this.state.list.map((user,index)=>{
      return (
        <tr key={user.id}>
          <td>{user.id}</td>
          <td>{user.username}</td>
          <td>{user.email}</td>
          <td>{user.phone}</td>
          <td>{new Date(user.createTime).toLocaleString()}</td>
        </tr>
      )
    });
    let listError = (
      <tr>
        <td colSpan='5' className='text-center'>
          {this.state.firstLoading ? '正在加载中...' : '没有找到相应结果'}
        </td>
      </tr>
    );
    let tableBody = this.state.list.length >0 ? listBody : listError;
    return (
      <div id='page-wrapper'>
        <PageTitle title='用户列表'/>
        <div className='row'>
          <div className="col-md-12">
            <table className="table table-striped table-bordered">
              <thead>
                <tr>
                  <th>ID</th>
                  <th>用户名</th>
                  <th>邮箱</th>
                  <th>电话</th>
                  <th>注册时间</th>
                </tr>
              </thead>
              <tbody>
                {
                  tableBody
                }

              </tbody>
            </table>
          </div>
        </div>
        <Pagination current={this.state.pageNum} total={this.state.total} onChange={ (pageNum)=>{this.onPageNumChange(pageNum)}}/>
      </div>
    )
  }
}
export default UserList